<template>
	<view>
		<view class="search">
			<uni-search-bar class="searchbar" @confirm="search" @input="input" v-model="searchValue" placeholder="搜索"
				cancelButton="none"></uni-search-bar>
		</view>
		<view class="commodity-box" :style="{height:windowHeight+'px'}">
			<!-- 左侧滚动 -->
			<scroll-view scroll-y="true" class="scroll-title-Y" :scroll-with-animation="true"
				:scroll-into-view="clickToId">
				<view :class="['commodity-classify',{'bg':selectClass===index}]"
					v-for="(item,index) in commodityClassify" :key="index" @click="classifyClick(index)"
					:id="'to' + index">
					{{item.name}}
				</view>
			</scroll-view>

			<!-- 右侧滚动 -->
			<scroll-view :scroll-top="myScrollTop" scroll-y="true" class="scroll-commodity-Y" @touchend="touchend"
				:scroll-into-view="clickId" @scroll="scroll" :scroll-with-animation="true">
				<view class="commodity-list right_title" v-for="(item,index) in commodityList" :key="index"
					:id="'po' + index">
					<!-- 每个商品页 -->
					<scroll-view class="content-box" scroll-y="true" @scroll="scroll2(index,$event)" :id="'co' + index">
						<view class="content-box-2">
							<view class="commodity-box-list" v-for="(item2, index2) in item.list" :key="index2">
								<view class="commodity-img">
									<image :src="item2.image" mode="widthFix"></image>
								</view>
								<view class="commodity-title">
									{{item2.storeName}}
								</view>
							</view>
						</view>
					</scroll-view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import $http from "@/ajax/http.js"
	export default {
		data() {
			return {
				token: wx.getStorageSync('shopToken'),
				windowHeight: null,
				commodityClassify: [],
				commodityList: [],
				selectClass: 0,
				clickId: '',
				clickToId: '',
				myScrollTop: '',
				topList: [],
				isLeftClick: false,
				timer: null,
				old: {
					scrollTop: 0,
					scrollTop2: ''
				},
				touchHeight: '',
				biggerThan: false,
				scroll2Index: ''
			}
		},
		onLoad() {
			this.fitNav();
			this.shopList();
			this.shopLists();
		},
		mounted() {
			this.getNodesInfo();
		},
		methods: {
			//获取商品接口
			shopList() {
				$http.request({
					header: {
						"Authori-zation": this.token
					},
					url: '/api/front/category',
				}, 2).then((res) => {
					this.commodityClassify = res
					console.log(res, "商品分类");
				})
			},

			// 商品列表
			shopLists() {
				$http.request({
					header: {
						"Authori-zation": this.token
					},
					url: '/api/front/products',
				}, 2).then((res) => {
					this.commodityList = res.list
					console.log(res, "商品分类sssssssssss");
				})
			},

			// 获取手机信息及位置
			fitNav() {
				// 获取手机信息
				let info = uni.getSystemInfoSync()
				// windowHeight:屏幕高度   statusBarHeight：状态栏高度  67：搜索框高度  45：title高度
				this.windowHeight = info.windowHeight - info.statusBarHeight - 67 - 45
			},
			search(e) {
				console.log('搜索', e);
			},
			// 左侧的点击
			classifyClick(index) {
				this.selectClass = index
				this.clickId = 'po' + index;
				this.isLeftClick = true;
			},
			// 触摸事件
			touchend(e) {
				console.log('结束', this.biggerThan);
				this.myScrollTop = this.old.scrollTop
				this.$nextTick(() => {
					this.myScrollTop = this.touchHeight
				})
				if (this.biggerThan) {
					clearTimeout(this.timer)
					this.timer = setTimeout(() => {
						this.commodityList[this.scroll2Index].scrollTop = this.old.scrollTop2
						this.$nextTick(() => {
							this.commodityList[this.scroll2Index].scrollTop = 0
							this.biggerThan = false
						})
					}, 400)

				}

			},
			scroll2(index, e) {
				this.scroll2Index = index
				this.old.scrollTop2 = e.detail.scrollTop
				this.biggerThan = false
			},
			scroll(e) {
				if (this.isLeftClick) {
					this.isLeftClick = false;
					return;
				}
				let scrollTop = e.target.scrollTop;
				this.old.scrollTop = e.detail.scrollTop
				for (let i = 0; i < this.topList.length; i++) {
					let h1 = this.topList[i];
					let h2 = this.topList[i + 1];
					if (scrollTop >= h1 && scrollTop < h2) {
						if (scrollTop < this.topList[1] / 2 + this.topList[1] * i) {
							this.selectClass = i;
							this.clickToId = 'to' + i;
							this.touchHeight = h1
						} else {
							this.selectClass = i + 1;
							this.clickToId = 'to' + (i + 1);
							this.touchHeight = h2
							this.biggerThan = true
						}
					}
					let length = this.topList.length;
					if (scrollTop >= this.topList[length - 1]) {
						this.selectClass = length - 1;
						this.clickToId = 'to' + (length - 1);
					}
				}
			},
			getNodesInfo() {
				const query = uni.createSelectorQuery().in(this);
				query
					.selectAll('.right_title')
					.boundingClientRect()
					.exec(res => {
						let arr = [];
						res[0].map(item => {
							arr.push(item.top - res[0][0].top);
						});
						this.topList = arr;
					});
			}
		}
	}
</script>

<style scoped lang="scss">
	.search-box {
		border-bottom: 1px solid #f6f3f6;
		padding: 20rpx 0;
	}

	.commodity-box {
		width: 100%;
		display: flex;

		.scroll-title-Y {
			width: 200rpx;
			height: 100%;
			background-color: #f7f4f8;

			.commodity-classify {
				width: 100%;
				height: 100rpx;
				line-height: 100rpx;
				color: #646464;
				font-size: 26rpx;
				padding-left: 30rpx;
			}

			.bg {
				color: #42c2a4;
				background-color: #fff;
				position: relative;
			}

			.bg::before {
				content: '';
				width: 10rpx;
				height: 30rpx;
				background-color: #42c2a4;
				border-radius: 2rpx;
				position: absolute;
				left: 1%;
				top: 50%;
				transform: translateY(-50%);
			}
		}

		.scroll-commodity-Y {
			flex: 1;
			height: 100%;
			background-color: #fff;

			.commodity-list {
				width: 100%;
				height: 100%;
				padding: 40rpx;

				.content-box {
					width: 100%;
					height: 95%;
				}

				.content-box-2 {
					width: 100%;
					height: 100%;
					display: flex;
					align-content: flex-start;
					justify-content: space-between;
					flex-wrap: wrap;
				}

				.commodity-box-list {
					width: 220rpx;
					height: 263rpx;
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: space-between;
					padding-top: 23rpx;
					margin-bottom: 40rpx;

					.commodity-img {
						width: 182rpx;
					}

					.commodity-title {
						font-size: 24rpx;
						color: #323232;
					}
				}
			}
		}
	}
</style>